// bower:scss
@import "../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap.scss";
// endbower

@import "_functions";

$width: 400px;
$min-tile-count: 3;
$max-tile-count: 6;
$tile-padding: 15px;
$tile-radius: 3px;
$tile-font: 'Open Sans', sans-serif;
$colors:  #EEE4DA, // 2
          #EAE0C8, // 4
          #F59563, // 8
          #3399ff, // 16
          #ffa333, // 32
          #cef030, // 64
          #E8D8CE, // 128
          #990303, // 256
          #6BA5DE, // 512
          #DCAD60, // 1024
          #B60022; // 2048

$game-container-background: #bbada0;
$tile-color: #eee4da;
$tile-gold-color: #edc22e;
$tile-gold-glow-color: lighten($tile-gold-color, 15%);
$text-color: #776E65;
$bright-text-color: #f9f6f2;

// DON'T EDIT BELOW
$transition-time: 170ms;

.container {
  max-width: 600px;
}

html, body {
  margin: 0;
  padding: 0;

  background: #faf8ef;
  color: $text-color;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
}

p {
   margin-top: 0;
   margin-bottom: 10px;
   line-height: 1.65;
   display: block;
   -webkit-margin-before: 1em;
   -webkit-margin-after: 1em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
}

a {
  color: $text-color;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
  &:hover {
    color: darken($text-color, 5%);
  }
}

strong {
  &.important {
    text-transform: uppercase;
  }
}

hr {
  border: none;
  border-bottom: 1px solid lighten($text-color, 40%);
  margin-top: 20px;
  margin-bottom: 30px;
}

#heading {
   margin-top: 4em;
}

h1.title {
   font-size: 80px;
   font-weight: bold;
   margin: 0;
   display: block;
   float: left;
}

.scores-container {
  text-align: right;
  float: right;
}

.score-container, .best-container {
  $inner-height: 25px;

  min-height: 2.5em;
  min-width: 5em;

  position: relative;
  display: inline-block;
  background: $game-container-background;
  padding: 15px 25px;
  font-size: $inner-height;
  height: $inner-height;
  line-height: $inner-height + 22px;
  font-weight: bold;
  border-radius: 3px;
  color: white;
  margin-top: 8px;
  text-align: center;

  &:after {
    position: absolute;
    width: 100%;
    top: 10px;
    left: 0;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 13px;
    text-align: center;
    color: $tile-color;
  }

  .score-addition {
    position: absolute;
    right: 30px;
    color: red;
    font-size: $inner-height;
    line-height: $inner-height;
    font-weight: bold;
    color: rgba($text-color, .9);
    z-index: 100;
    @include animation(move-up 600ms ease-in);
    @include animation-fill-mode(both);
  }
}

.score-container:after {
  content: "Score";
}

.best-container:after {
  content: "Best"
}

#instructions {
   padding-top: 0.5em;

   .restart-button {
      margin-top: -0.5em; /* hack */
   }
}

.restart-button {
   display: inline-block;
   background: #8f7a66;
   border-radius: 3px;
   padding: 0 20px;
   text-decoration: none;
   color: #f9f6f2;
   height: 40px;
   line-height: 42px;
   cursor: pointer;
   display: block;
   text-align: center;
   float: right;
   border: none;
}

#content {
   
}

#game-container {
   position: relative;
   width: $width;
   height: $width;
   margin: 40px auto;
}

.game-overlay {
  width: $width;
  height: $width;
  background-color: rgba(255, 255, 255, 0.47);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  text-align: center;
  padding-top: 35%;
  font-size: 3em;
  font-weight: bold;
  overflow: hidden;
  box-sizing: border-box;
  
  &.ng-enter {
    @include transition(all 1000ms ease-in);
    @include transform(translate(0, 100%));
    opacity: 0;
  }

  &.ng-enter-active {
    @include transform(translate(0, 0));
    opacity: 1;
  }

  .lower {
    display: block;
    margin-top: 29px;
    font-size: 16px;

    a {
       display: inline-block;
       background: #8f7a66;
       border-radius: 3px;
       padding: 0 20px;
       text-decoration: none;
       color: #f9f6f2;
       height: 40px;
       line-height: 42px;
       cursor: pointer;
       margin-left: 9px;
    }
  }
}

@mixin game-board($tile-count: 4) {
  $tile-size: ($width - $tile-padding * ($tile-count + 1)) / $tile-count;
  #game-#{$tile-count} { 
    position: relative;
    padding: $tile-padding;
    cursor: default;
    background: #bbaaa0;
    border-radius: 6px;
    width: $width;
    height: $width;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    .grid-container {
      position: absolute;
      z-index: 1;
      margin: 0 auto;

      .grid-cell {
        width: $tile-size;
        height: $tile-size;
        margin-bottom: $tile-padding;
        margin-right: $tile-padding;
        float: left;
        @include border-radius($tile-radius);
        background: rgba(238, 228, 218, 0.35);
        &:last-child {
          margin-right: 0
        }
      }
    }

    .tile-container {
      position: absolute;
      z-index: 2;

      .unstyled-tile {
        font-family: $tile-font;
        position: absolute;
        width: $tile-size;
        height: $tile-size;
        background: white;
        margin: 0 auto;
        font-size: 2em;
        text-align: center;
        font-weight: bold;
        z-index: 10;
        font-size: 2.5em;
        line-height: ($width/$tile-count) - $tile-padding;
      }
      .tile {
        font-family: $tile-font;
        position: absolute;
        width: $tile-size;
        height: $tile-size;
        @include border-radius($tile-radius);
        @include transition($transition-time ease-in-out);
        // @include transition-property(transform);
        -webkit-transition-property: -webkit-transform;
        -moz-transition-property: -moz-transform;
        transition-property: transform;
        z-index: 2;

        &.tile-merged .tile-inner {
          @include animation(pop 200ms ease-in);
        }

        @for $x from 1 through $tile-count {
          @for $y from 1 through $tile-count {
            $zeroOffsetX: $x - 1;
            $zeroOffsetY: $y - 1;
            $newX: ($tile-size) * ($zeroOffsetX) + ($tile-padding * $zeroOffsetX);
            $newY: ($tile-size) * ($zeroOffsetY) + ($tile-padding * $zeroOffsetY);

            &.position-#{$zeroOffsetX}-#{$zeroOffsetY} { 
              @include transform(translate($newX, $newY));
            }
          }
        }

        @for $i from 1 through length($colors) {
          &.tile-#{power(2, $i)} .tile-inner {
            background: nth($colors, $i)
          }
        }
        &:last-child {
          margin-right: 0
        }

        .tile-inner {
          line-height: ($width/$tile-count) - $tile-padding;

          text-align: center;
          font-weight: bold;
          z-index: 10;
          font-size: 2.5em;
        }
      }
    }
  }
}

@for $i from $min-tile-count through $max-tile-count {
  @include game-board($i);
}

@include keyframes(appear) {
  0% {
    opacity: 0;
    @include transform(scale(0));
  }
  50% {
    opacity: 1;
    @include transform(scale(1.2));
  }
  100% {
    opacity: 1;
    @include transform(scale(1));
  } 
}

@include keyframes(pop) {
  0% {
    opacity: 1;
    @include transform(scale(1));
  }
  50% {
    // opacity: 0;
    @include transform(scale(1.2));
  }
  100% {
    opacity: 0;
    @include transform(scale(1));
  }
}
